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Утечки памяти в SSR 


причины, поиск, устранение 
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Вова Захаров 


ведущий фронтенд-разработчик 
ех-Зарплата.ру 
больше 8 лет опыта в ТТ 


люблю плавающие баги, беседы о 
техдолге и шутки про 
ненастоящих программистов 
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Зарплата.ру 


федеральный джоб-борд 
около 5 млн MAU 


изоморфный код зарплата.ру 


ReactJS, Redux, 1S, nodejs, webpack ТЕБЯ УСТРОИТ 


Express на SSR 


зоопарк микросервисов Ha бэкенде 


Предпосылки 


Как мы столкнулись с проблемой 


1 


Большая и долгая 
задача, связанная 
с крупной интеграцией 
со сторонним сервисом 


2 


Нет возможности 
тестировать 

и публиковать 
функционал по частям 


5 


Нет нагрузочного 
тестирования 
на 55К-сервис 
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График расхода памяти внутри контейнера SSR 
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График расхода памяти внутри контейнера SSR вс Frontend 
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Проблема 


Хьюстон, прием! 


1 2 5 4 


SSR работает, > 99% загрузка d Превьшена квота » Трекер ошибок умер 
но рестарт 2-5 процессора оперативной под внутренним DDoS 
раза в сутки памяти 
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Типичнь сценарий 


- двигаем пиксели 
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Типичный сценарии 


— двигаем пиксели 


- пишем код для браузера 
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Типичный сценарии 


. двигаем пиксели 
- пишем код для браузера 


индивидуальная среда и ресурсы 
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Типичный сценарии 


двигаем пиксели 
пишем код для браузера 
индивидуальная среда и ресурсы 


малое количество действий 
пользователя в рамках одной 
сессии 
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Типичный сценарии 


двигаем пиксели 
пишем код для браузера 
индивидуальная среда и ресурсы 


малое количество действий 
пользователя в рамках одной 
сессии 


утечки никак себя не проявляют 
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Типичный сценарии 


двигаем пиксели 
пишем код для браузера 
индивидуальная среда и ресурсы 


малое количество действий 
пользователя в рамках одной 
сессии 


утечки никак себя не проявляют 


редкие случаи можно списать 
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Почему утечки - это проблема 


на клиенте 


видимая потеря фреймрейта 
и зависание ОТ 
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Почему утечки - это проблема 


на клиенте 


, : ни 
видимая потеря фреймрейта meh 
и зависание ОТ P р n 


батарея 
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Почему утечки - это проблема 


на клиенте 


1 


5 


видимая потеря фреймрейта 
и зависание ОТ 


повышенная нагрузка 
на процессор — кто-то 
майнит крипту 


2 


повышенное потребление 
энергии — быстрее садится 
батарея 
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Почему утечки - это проблема 


на клиенте 


1 


5 


видимая потеря фреймрейта 
и зависание ОТ 


повышенная нагрузка 
на процессор — кто-то 
майнит крипту 


повышенное потребление 
энергии — быстрее садится 
батарея 


блокирование потока 
и падение вкладки/браузера 
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Почему это огромная проблема 


на сервере 


из-за высокой нагрузки утечки 
растут лавинообразно 
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Почему это огромная проблема 


на сервере 


из-за высокой нагрузки утечки тратят общие ресурсы 
растут лавинообразно сервера 
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Почему это огромная проблема 


на сервере 


из-за высокой нагрузки утечки тратят общие ресурсы 
растут лавинообразно сервера 


проблемы одновременно 
начинаются у всех 


пользователей 
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Почему это огромная проблема 


на сервере 


из-за высокой нагрузки утечки тратят общие ресурсы 
растут лавинообразно сервера 
о оказывают сайд-эффекты на 
Па Дели сторонние сервисы 
пользователей і P 
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Как это 
работает 


Устройство памяти V8 


объекты 


динамические 
данные 


Неар тетогу 


примитивы 


ссылки 


Фреймы функций 


глобальный 
Фрейм 


Stack 
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Работа GC в V8 


- автоматическии запуск 
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Работа GC в V8 


- автоматическии запуск 


- асинхронный и непредсказуемый 
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Работа GC в V8 


автоматический запуск 
асинхронный и непредсказуемый 


«необходимость» == «достижимость» 
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Работа GC в V8 


автоматический запуск 
асинхронный и непредсказуемый 
«необходимость» == «достижимость» 


существуют слабые и сильные ссылки 


KNIFE-WRENCH!!! 
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Работа GC в V8 


- автоматическии запуск 

- асинхронный и непредсказуемый 

- «необходимость» == «достижимость» 

- существуют слабые и сильные ссылки 


- слабые ссылки создаются структурами 
WeakMap, WeakSet, WeakRef 


Frontend 
Conf 2022 


Работа GC в V8 


автоматический запуск 
асинхронный и непредсказуемый 


«необходимость» == «достижимость» 


| і | 


== \ 
существуют слабые и сильные ссылки | М 


слабые ссылки создаются структурами 
WeakMap, WeakSet, WeakRef 


слабые ссылки не учитываются СС 
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Работа GC B V8 


Mark Sweep Compact 


~ 


СС Коог 


p шшш шып шыш шыш шыш шыш шын шын шыш шын шыш шыш шын шын шын шын Tw 


-— 


Работа GC в V8 


Mark Sweep Compact 
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Работа GC в V8 


Mark Sweep Compact 
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Работа GC в V8 


Mark Sweep Compact 


Еще раз 
о сервернои среде 


один общий хип 
один общий стек 


кратный рост количества 
исполнений 


синглтоны, кэши, подписки, 
таймауть, промисы, воркеры — 
все теперь общее 
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Утечка памяти 


неконтролируемое уменьшение объема 
свободной оперативной или виртуальной 
памяти компьютера, связанное 

с невозможностью вовремя освободить 
память от ненужных данных. 


Утечка — накопление мусора в хипе, 
невозможность корректной работы GC 
из-за «потерянной» ссылки на объект. 


ALLOCATION 


USAGE 
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норма 


нагрузка 


утечка 


нагрузка 


утечка 


норма 


утечка 


норма 


утечка 


норма 


нагрузка 


Как получить 
дамп с SSR? 


E 


«б 
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node --inspect 


DevTools Devices 
настроить port-forwarding | 

Devices Discover USB devices Port forwarding... 
node --ins pe Ct app Ј S ig Discover network targets Configure... 


; Extensio! Open dedicated DevTools for Node 
chrome://inspect | 


Open dedicated DevTools Remote Target » 


for Node ervice workers Target 


@ index.js 
inspect 
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eee DevTools - Node.js 


Connection Console Profiler Sources Memory > x 


C» © Е Record memory allocations using sampling method. This profile type has minimal 
performance overhead and can be used for long running operations. It provides good 


з approximation ої allocations broken down ру JavaScript execution stack. 
rofiles 


Select JavaScript VM instance 


86.6 MB 411.1 kB/s Node.js: file:///Users/v.zaharov/dev/smth/index.js 


86.6 MB 411.1 kB/s Total JS heap size 


Constructor 


у (closure) x3896 


> replaceData() (84581 


> someMethod() 
> someMethod() 
> someMethod() 
> someMethod() 
> someMethod() 
> someMethod() 
> someMethod() 
> someMethod() 
> someMethod() 


41250719 
(41250733 
(41250751 
(01250777 
(01250807 
(01250845 
(01250887 
(01250937 
41250991 


file:///Users/v.zaharov/dev/smth/index.js:43 
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npm heapdump 


последний релиз $ года назад 
использует нативный поаез— модуль 


для сборки нужен python 


из коробки не работает 


пеардитр. 
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require('v8") 


для ноды версии > 115.0 


есть дополнительные инструменты 


работает из коробки 
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Как снимать снапшоты 


setTimeout(() { 
v8.writeHeapSnapshot(”./$(Date.now( ) } .һеарѕпарѕһої`); 


|, М | 3 


снять дамп вручную kill -USR2 «pid nodejs 


process.on('SIGUSR2', () 1 


v8.writeHeapSnapshot(^./$1Date.now()] .heapsnapshot ); 
1); 
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Особенности 


объем памяти в контейнере должен 
бьть в два раза больше, чем 
текущий размер хипа 


имя файла должно иметь 
расширение heapsnapshot 


06/22 18:00 06/22 21:00 06/23 00:00 Frontend 
Conf 2022 


Поиск 
и анализ 


Chrome Dev Tools 


Connection Console Profiler Sources 


Profiles 


HEAP SNAPSHC 


Summary У | Class filter 


Constructor 

» (closure) x3352 

> Object x739 

> system / Context x844 
> (concatenated string) x240405 
> (array) x930 

> (system) x9226 

> (compiled code) x3973 
> (string) x7203 

» Мар x22 

» NativeModule х224 

» global х2 

Retainers 

Object 


DevTools - Node.js 


Memory 


All objects 


Distance Shallow Size 
200048 2% 
37864 0% 
50808 1% 
7 692 960 80 % 
428360 4% 
546000 6% 
350 104 4% 
256 872 3% 
1288 0% 
19712 0% 
72 0% 


Distance Shallow Size 


Retained Size 


8 675 976 90 % 
8 287 464 86 % 
8 027 032 83 % 
7 706 688 80 % 


634 680 
620 480 
527 184 
256 944 
199 504 
116 864 

96 384 


Retained Size 


7% 
6 96 
5% 
3% 
2% 
1% 
1% 


Profiles 


HEAP SNAPSHOTS 


4 Constructor Distance Shallow Size Retained Size 


200 048 2% 8675976 90 90 
37 864 0%, 8287 464 86% 
50808 1% 8027032 83 90 

7 692 960 80 % 7 706 688 80 90 

428 360 4% 634 680 7% 

546 000 6% 620480 6% 

350 104 4% 527 184 5% 

256 872 3% 256 944 3% 

1288 0% 199 504 2% 
19712 0% 116 864 1% 
72 0% 96 384 1% 
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> (closure) х3352 

» Object x739 

» system / Context х844 
» (concatenated string) х24... 
» (array) x930 

» (system) х9226 

» (compiled code) х3973 
» (string) х7203 

> Мар х22 

> NativeModule x224 

> global x2 


— о C N WN мм AO CQ nm DR 


Constructor 

> (closure) х3352 

» Object x739 

» system / Context х844 


» (concatenated string) х24... 


» (array) х930 

» (system) х9226 

» (compiled code) х3973 
» (string) х7203 

> Мар х22 

> NativeModule x224 

> global x2 


Distance 


— о C N WN мм сло г m 


Shallow Size 


200048 2% 


37 864 
50 808 


0% 
1% 


7 692 960 80 90 


428 360 
546 000 
350 104 
256 872 
1 288 
19 712 
72 


4% 
6% 
4 90 
3% 
0% 
0% 
0% 


Retained Size 


8 675 976 
8 287 464 
8 027 032 
7 706 688 
634 680 
620 480 
527 184 
256 944 
199 504 
116 864 
96 384 


90 90 
86 90 
83 90 
80 90 
7% 
6% 
5% 
3% 
2% 
1% 
1% 
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Constructor 

> (closure) х3352 

» Object x739 

» system / Context х844 


» (concatenated string) х24... 


» (array) х930 

» (system) х9226 

» (compiled code) х3973 
» (string) х7203 

> Мар х22 

> NativeModule x224 

> global x2 


Distance 


— о C N WN мм 0Q nm DR 


Shallow Size 


200048 2% 


37 864 
50 808 


0% 
1% 


7 692 960 80 90 


428 360 
546 000 
350 104 
256 872 
1 288 
19 712 
72 


4% 
6% 
4 90 
3% 
0% 
0% 
0% 


Retained Size 


8 675 976 
8 287 464 
8 027 032 
7 706 688 
634 680 
620 480 
527 184 
256 944 
199 504 
116 864 
96 384 


90 90 
86 90 
83 90 
80 90 
7% 
6% 
5% 
3% 
2% 
1% 
1% 
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Constructor 

> (closure) х3352 

» Object x739 

» system / Context х844 


» (concatenated string) х24... 


» (array) х930 

» (system) х9226 

» (compiled code) х3973 
» (string) х7203 

> Мар х22 

> NativeModule x224 

> global x2 


Distance 


— о C N WN мм AO CQ nm DR 


Shallow Size 


200048 2% 


37 864 
50 808 


0% 
1% 


7 692 960 80 90 


428 360 
546 000 
350 104 
256 872 
1 288 
19 712 
72 


4% 
6% 
4 90 
3% 
0% 
0% 
0% 


Retained Size 


8 675 976 
8 287 464 
8 027 032 
7 706 688 
634 680 
620 480 
527 184 
256 944 
199 504 
116 864 
96 384 


90 90 
86 90 
83 90 
80 90 
7% 
6% 
5% 
3% 
2% 
1% 
1% 
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Profiles 


HEAP SNAPSHOTS 


snap 
9.6 MB 


snap2 
15.3 MB 


snap3 
24.1 MB 
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Constructor Distance 
> (closure) x3943 

» Object x1191 

» system / Context х1292 


> (concatenated string) x68... 
» (system) x9894 

» (array) х1026 

» (compiled code) х4117 

» (string) х7913 

» Map x22 


№ NativaMnari ila 


оо N C N NY сто NY DR 


~ 224 


Shallow Size 


237 456 
56 128 
69 760 


1% 
0% 
0% 


22 040 768 91 % 


582 392 
438 304 
358 456 
280 456 


1 288 
10 712 


2% 
2% 
1% 
1% 
0% 
П % 


Retained Size 


23 134 176 96% 
22 714 640 94 % 
22 466 280 93 % 
22-069 304 91 90 


663 600 
649 120 
551 384 
280 528 


205 160 
112 7а2 


3% 
3% 
2% 
1% 
1% 
N ол 
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Summary У | Class filter v All objects 
| CO Distz Objects allocated before snap1 
Profiles WE етет Objects allocated between snap1 апа ѕпар2 
(сіовиге) х Objects allocated between ѕпар2 and snap3 


НЕАР SNAPSHOTS » Object x1191 2 Do 128 U| 22 (14040 94 № 

snap1 » system / Context x1292 69 760 0%. 22466280 93 90 
» (concatenated string) x688774 22 040 768 91% 22 069 304 91 90 
> (system) х9894 582 392 29 663 600 390 
> (array) х1026 438 304 2% 649 120 3% 
» ( 


9.6 МВ 


snap2 
15.3 MB 


snap3 


24.1 МВ compiled code) х4117 358456 1% 551384 2% 


All objects 
Objects allocated before Snapshot 1 
v Objects allocated between Snapshot 1 and Snapshot 2 


Objects allocated between Snapshot 2 and Snapshot 3 —— 
FC Согёгог 


Summary У | Class filter 


Constructor 

» Object x184 

> (closure) x319 

> system / Context x175 

> (concatenated string) x172093 
system) x818 

array) x120 


» ( 
> (compiled code) х146 
» ( 
» ( 


string) х437 


Objects allocated between snap1 and snap2 7 


Distance 


6 
4 
T 
6 
5 
5 
5 
5 


Shallow Size 

7592 0% 
20000 0% 
8032 094 

5 506 976 23 90 
47120 0% 
8464 0% 

16 384 0% 

14 848 0% 


stained Size 


v 


13 261 848 55% 
13 250 464 55 96 
13 230 928 55 95 

5 513 048 23 90 


53 888 
19 240 
17 832 
14 848 


Ü 96 
0% 
0% 
0% 
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Constructor 

» Object х184 

v(closure) x319 
» someMethod() 
> someMethod() 
> someMethod ( ) 
> someMethod( ) 
> someMethod() 
> someMethod ( ) 
> someMethod() 
> someMethod( ) 
> someMethod() 


@871825 
@839899 
@833215 
@831183 
@829151 
@829139 
@879969 
@877937 
0875905 


Distance Shallow Size 
7 592 
20 000 
64 

64 

64 

64 

64 

64 

64 

64 

64 


0% 
0% 
0% 
0% 
0% 
0% 
0% 
0% 
0% 
0% 
0% 


Retained Size v 
13 261 848 55 90 
13 250 464 55% 
13 219 464 55 90 
13 186 904 55 90 
13 154 344 55 90 
13 121 784 54 90 
13 089 224 54 90 
13 056 664 54 90 
13 024 104 54 90 
12 991 544 54 90 
12 958 984 54 90 
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Паттерны 
утечек 


OG 


PEL 


function () I 
bar = | val: "hello world" |; 


} 


function () I Глобальные 


this.bar = { val: "hello world" У; переменные 
} 


GF 


global.bar.val == "hello world" 


<script> 
var bar = { val: "hello world" }; 
</script> 


Frontend 
FC Conf 


Интервалы, таймеры, подписки 
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Интервалы, таймеры, подписки 


критерий очистки таймера / интервала 


function ON! 
const hugeArray = |... ]; 
const newArray - hugeArray. КРДА У а 


} 


const intervalID = , 1000); 


(intervalID); 
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Кэш и мемоизация 


memoize 


acu Jrl 


companyUrl; 
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Кэш и мемоизация 


memoize 


scone Jrl 


companyUrl; 
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Кэш и мемоизация 


memoize : He кэшируйте все подряд 


companyUrl; 
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Кэш и мемоизация 


memoize : He кэшируйте все подряд 


даа | не используйте объекты 
) { как ключи 


companyUrl; 
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Кэш и мемоизация 


memoize : He кэшируйте все подряд 


не используйте объекты 
как ключи 


lodash memoize хранит 
ссылки вечно 


companyUrl; 
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Кэш и мемоизация 


memoize : He кэшируйте все подряд 


не используйте объекты 
как ключи 


lodash memoize хранит 
ссылки вечно 


companyUrl; 


используйте WeakMap, WeakSet 
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replaceData() 


data; 


unusedMethod() { 


| а) б Замькания 


data = { 
id: generateId( Ji 
someMethod UTE 
}; 
}; 


setInterval(replaceData, ): 
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ай, 


replaceData() { 
[ дата; 


unusedMethod() I 


a) б Замькания 


? 


data = 1 
id: generateId( n 
someMethod UTE 
}; 
}; 


setInterval(replaceData, ): 
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ай, 


replaceData() { 
1 дата; 


unusedMethod() I 


а) 0 Замькания 


id: generateId( 
someMethod 


setInterval(replaceData, 
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Constructor 

» Object х184 

v(closure) x319 
» someMethod() 
> someMethod() 
> someMethod ( ) 
> someMethod( ) 
> someMethod() 
> someMethod ( ) 
> someMethod() 
> someMethod( ) 
> someMethod() 


@871825 
@839899 
@833215 
@831183 
@829151 
@829139 
@879969 
@877937 
0875905 


Distance Shallow Size 
7 592 
20 000 
64 

64 

64 

64 

64 

64 

64 

64 

64 


0% 
0% 
0% 
0% 
0% 
0% 
0% 
0% 
0% 
0% 
0% 


Retained Size v 
13 261 848 55 90 
13 250 464 55% 
13 219 464 55 90 
13 186 904 55 90 
13 154 344 55 90 
13 121 784 54 90 
13 089 224 54 90 
13 056 664 54 90 
13 024 104 54 90 
12 991 544 54 90 
12 958 984 54 90 
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Constructor 


v(closure) x3671 


v someMethod() (871825 10 


№ 


» 
» 
» 
å 
å 


:: System / Context 11 
 proto :: () @8851 [П З 
49229 З 

:: SomeMethod (034337 11 

:: (CompileLazy builti 3 

934 11 


64 
40 
56 
12 
56 
128 
24 


D. Shallow... 
2)040 


1% 
0% 
0% 
0% 
0% 
0% 
0% 
0% 


Retained Size v 
14 282 544 93 % 
13 219 464 86 90 
13 219 400 86 % 
920 0% 

216 0% 

144 0% 

128 0% 

24 0% 
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:: system / Context 0871821 
> > +: System / Context @4581 
vpreviosData :: Object @839895 
> someMethod :: someMethod() @839899 


Pid :: "fhdQXQVMjKMIuigDCOWstfwaEY1XUQqGZ0OiJ 
> тар :: Ste ар 034347 
> proto :: Object @9119 | 

(function scope info) || @34359 
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ай, 


replaceData() { 
1 дата; 


unusedMethod() I 


а) 0 Замькания 


id: generateId( 
someMethod 


setInterval(replaceData, 
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ай, 


replaceData() 4 


data; 


unusedMethod() 4 


ta) {} 


data = ( 
id: generateId( ) 
someMethod 
}; 
}; 


setInterval(replaceData, 


m 


J: 


Замькания 


лексическое окружение 
едино для всех 
создаваемых функций 
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Подстроки 


function () I 
return "0". (25 ж 1024 + 1024} 
} 


const arr = |]; 


(function() { 
const str = (): 
arr. (str); 
}, 500); 
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оо f 
Profiles 


HEAP SNAPSHOTS 


Snapshot 1 
1.0 MB 


Snapshot 2 
E] 1.0 MB 


Snapshot 3 
1.0 MB 


Summary У | Class filter 


Constructor 
> (compiled code) x5 
у (string) x7 
> @52127 
@52129 


@52131 П 


@52133 
@52135 


@52137 [ 
@52139 | 


> (object shape) x2 


Retainers 


Object 


Objects allocated between Snapshot 1 and Snapshot 2 У 


Distance 


Distance 


~ с о с с с с с се + 


Shallow Size 
192 
168 

24 
24 
24 
24 
24 
24 
24 
36 


Shallow Size 


Hamn памяти для подстрок длиной 12 символов, вкладка Memory в Chrome Dev Tools 


Retained Size 
248 
168 


24 
24 
24 
24 
24 
24 
24 
36 


Retained Size 


FC 


Frontend 
Conf 


Подстроки 


начиная с длины в 15 символов, хранят ссылку на родительскую строку 


function () I 
return "0". (25 ж 1024 + 1024} 


const arr = ||; 


(function() { 
const str = (): 
arr. (str); 
}, 500); 
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eo 9 9 биттагу у | Class filter Objects allocated between Snapshot 1 and Snapshot 2 У 


Constructor Distance Shallow Size Retained Size 
120 0% 157 286 592 35 % 
20 0% 26214432 6% 
26214412 6% 26214412 6% 
40 0% 40 0% 
20 0% 26214432 6% 
20 0% 26214432 6% 
20 0% 26214432 6% 
20 0% 26214432 6% 
20 0% 26214432 6% 
157 286 472 35 % 157 286 472 35 90 
26 214412 6% 26214412 6% 
26 214412 6% 26214412 6% 
26 214412 6% 26214412 6% 


DA 914 419 В 04 DA 914 419 в 04 


Profiles 
v (sliced string) x6 


HEAP SNAPSHOTS У (sliced string) @60701 
Snapshot 1 > 
132 MB 
> 3c 
Snapshot 2 - 5 på 
Å 209 MB > (sliced string) (60795 | 
> (sliced string) 60709 р 
Snapshot 3 
nire > (sliced string) (60713 П 
> (sliced string) @60717 J 
> (sliced string) 060719 
v (string) x6 
> 


> 


~ A A һ с с WW WwW fF ь с 0 


> 


> 


> 


Retainers = 


Object Distance Shallow Size Retained Size 


Hamn памяти для подстрок длиной 15 символов, вкладка Memory в Chrome Dev Tools ЕС тое 
оп 


Подстроки 


начиная с длины в 15 символов, хранят ссылку на родительскую строку 


createString() { 
"0" repeat(2: 024 1024).substring(0, 1) 


Ше 


setInterval( C) 
rr.push(str); 


ү; - 0); 
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PR дальше 


жить? 


Что делать? 


мониторинг потребления ресурсов 
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Что делать? 


мониторинг потребления ресурсов 


автоматические оповещения при превышении квоты 


понимание принципа общего использования 
ресурсов Ha Server side 


своевременное обновление пакетов 
преждевременная оптимизация — зло 


учет возможности утечки при написании кода 


понять и простить, мы же фронтендеры Frontend 
Conf 2022 


Summary 


- принципы работы сборщика мусора 
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Summary 


принципы работы сборщика мусора 
особенности серверной среды 
способы получения дампа памяти 


устройство вкладки Memory в ChDT 
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Summary 


принципы работы сборщика мусора 
особенности серверной среды 
способы получения дампа памяти 
устройство вкладки Memory в ChDT 
метод поиска и анализа утечек в дампе 


паттерны утечек на сервере 
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Спасибо 
за внимание! 


Остались вопросы? 


tg: @vzkhrv 


Fronten 
FC Con 


Ф 


мониторинг ресурсов 
автоматические оповещения 

принцип общей среды Ha Server side 
обновление пакетов 
преждевременная оптимизация — зло 


знать паттерны утечек @ 
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tg: Ovzkhrv 


~ 


Ф 


мониторинг ресурсов 
автоматические оповещения 

принцип общей среды Ha Server side 
обновление пакетов 
преждевременная оптимизация — зло 


знать паттерньгутечек @ 
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tg: Ovzkhrv 


~ 


Паттерны утечек 


на клиенте 


Event Listeners 
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Event Listeners 


от событий нужно отписываться 


параметр {once: true} 


handleClick () { 
{ 


nt(removeEventListener(/click', handleClick); 


ment.addEventListener('click', pandectick({ once: true DD 


FC 
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Detached DOM 


parent 
child 
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Detached DOM 


обнулять ссылку после использования 


removeChild() I 
(child) I 
child.remove(); 
child - null; 


t. addEventListener("click", removeChild); 


t.removeEventListener("click", removeChild); 


FC 
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Detached window 


Show 
hide 


popup; 
show. onclick 
popup 
ЈЕ 


hide.onclick 


It. getELementById("#show" ); 
:.getElementById("#hide" ); 


О > 4 


.open('/some-url'); 


О > 4 


(popup) 1 popup.close(); | 


is 


FC 


Frontend 
Conf 2022 


Detached window 


It.getElementById("ttshow"); 
:.getElementById( "#1995 


popup; 


show.onclick () I 


popup Nindow.open('/some-url' ); 


ЈЕ 


hide.onclick = () I 


(popup) 1 popup.close(); | 
|; 
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Detached window 


It. getELementById("#show" ); 
:.getElementById("#hide" ); 


Show.onclick = () { 
popup і паом.ореп( ' /some-url' 


hide.onclick = () { 
(popup) { popup.close(); | 
|; 
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Detached window 


show = document.getElementById("#show" ); 
hide = document.getElementById("#hide"); 


popup; 


show.onclick = () 1 
popup = window.open('/some-url'); 


ү; 


ide.onclick 
(popup) 1 popup.close(); | 
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Detached window 


show = document.getElementById("#show" ); 
hide = document.getElementById("ithide"); 


show.onclick = () 1 


рорир Nindow.open('/some-url' ); 


ЈЕ 


hide.onclick = () { 


(popup) 1 popup.close(); | 
|; 
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Detached window 


использовать WeakRef для хранения ссылок на 0О0М.лементь 


show.onclick = () { 
рорир WeakRef(window.open('/some-url')); 
}; 


hide.onclick = () { 
popup.deref(); 
(wi vin.close(); ) 


I5 
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